<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="800px"
  @open="handleDialogOpen()" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-descriptions>
          <el-descriptions-item label="订单编号">kooriookami</el-descriptions-item>
          <el-descriptions-item label="运单编号">18100000000</el-descriptions-item>
          <el-descriptions-item label="下单时间">苏州市</el-descriptions-item>
          <el-descriptions-item label="订单状态">苏州市</el-descriptions-item>
          <el-descriptions-item label="预计到达日期">江苏省苏州市吴中区吴中大道</el-descriptions-item>
        </el-descriptions>
        <ul></ul>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="基本信息" name="1">
            <div style="height: 120px;">
              <el-steps direction="vertical" :active="1">
                <el-step title="发货方" icon="el-icon-location-information" description="发货方姓名:outerVisible"v-model="outerVisible"></el-step>
                <el-step title="收货方" icon="el-icon-map-location" description="这是一段很长很长很长的描述性文字"></el-step>
              </el-steps>
            </div>
          </el-collapse-item>
          <el-collapse-item title="费用信息" name="2">
            <el-descriptions>
              <el-descriptions-item label="运费">kooriookami</el-descriptions-item>
              <el-descriptions-item label="支付方式">18100000000</el-descriptions-item>
              <el-descriptions-item label="付款状态">苏州市</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item title="货品信息" name="3">
            <el-table  stripe style="width: 100%">
              <el-table-column prop="" label="序号" >
                <template slot-scope="scope">
                  <el-spinner v-text="scope.$index+1"></el-spinner>
                </template>
              </el-table-column>
              <el-table-column prop="" label="货品名称" />
              <el-table-column prop="" label="货品数量" />
              <el-table-column prop="" label="货品单位"  />
              <el-table-column prop="" label="货品类型" />
              <el-table-column prop="" label="重量（千克）" />
              <el-table-column prop="" label="体积（方）"  />
              <el-table-column prop="" label="货值（元）"  />
              <el-table-column prop="" label="条形编码"  />
              <el-table-column prop="" label="备注"  />
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="取件信息" name="4">
            <el-descriptions column="4">
              <el-descriptions-item label="所在网点">kooriookami</el-descriptions-item>
              <el-descriptions-item label="取件类型">18100000000</el-descriptions-item>
              <el-descriptions-item label="作业状态">苏州市</el-descriptions-item>
              <el-descriptions-item label="取件快递员">苏州市</el-descriptions-item>
              <el-descriptions-item label="快递员电话">苏州市</el-descriptions-item>
              <el-descriptions-item label="预计取件时间">苏州市</el-descriptions-item>
              <el-descriptions-item label="取件完成时间">苏州市</el-descriptions-item>
              <el-descriptions-item label="实际取件完成时间">苏州市</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item title="派送信息" name="5">
            <el-descriptions column="4">
              <el-descriptions-item label="所在网点">kooriookami</el-descriptions-item>
              <el-descriptions-item label="作业状态">18100000000</el-descriptions-item>
              <el-descriptions-item label="派送快递员">苏州市</el-descriptions-item>
              <el-descriptions-item label="快递员电话">苏州市</el-descriptions-item>
              <el-descriptions-item label="预计派送时间">苏州市</el-descriptions-item>
              <el-descriptions-item label="派送完成时间">苏州市</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item title="运输信息" name="6">
            <el-steps :active="6" finish-status="success" align-center>
              <!-- <el-step v-for="(item,index) in paymentRecord" :key="index" title="缴费记录">
                 <template slot="description">
                   <p>缴费时间:{{item.payTime}}</p>
                   <p>缴费方式：{{item.paymentMethod}}</p>
                   <p>缴费金额：{{item.payMoney}}</p>
                   <p>交易码：{{item.qrCode}}</p>
                   <p>收款编号：{{item.paymentNumber}}</p>
                 </template>
               </el-step>-->
            </el-steps>
          </el-collapse-item>
          <el-collapse-item title="订单轨迹" name="7">
            <el-descriptions>
              <el-descriptions-item label="运费">kooriookami</el-descriptions-item>
              <el-descriptions-item label="支付方式">18100000000</el-descriptions-item>
              <el-descriptions-item label="付款状态">苏州市</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">返 回</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import axios from 'axios'
export default {
   name: "yd-detail",
    data() {
    return {
      loading: false,
      Model: {

      },
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      form: {

      }
    }
 },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'edit') {
            // this.doSaveTruck()
          }
        } else {
          return false
        }
      })
    },

    doSaveTruck() {
      // this.loading = true
      // axios.post("",this.truckModel)
      // .then(res => {
      //   console.log(res)
      //   this.loading = false
      //   this.dialogProps.visible = false
      //   this.$emit('save-finished')
      // })
      // .catch(err => {
      //   console.error(err);
      // })

    },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['Form'].clearValidate()
      })
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
   mounted: function() {
    this.$nextTick(() => {
      this.$on('openDetailYdDialog', function() {
        this.dialogProps.action = 'detail'
        this.dialogProps.title = ''
        this.dialogProps.visible = true
      })
    })
  }
}
</script>

<style>

</style>

